<template>
	<view class="">
		<view class="" v-if="show == false">
			<!-- 发布内容 -->
			<view class="min30 rad2 column" style="border: 2rpx solid #FAB029;">
				<view class="box center size26 font500">
					填写需求
				</view>

				<view class="min30 column">
					<view class="row size28 font700 col3 align minbottom20">
						<image src="@/static/index/type.png" mode=""
							style="width: 36rpx;height: 36rpx;margin-right: 10rpx;">
						</image>
						求租/求购类别
					</view>
					<view class="" @click="categoryshow = true">
						<u--input placeholder="请选择求租/求购类别" disabled="true" v-model="category"
							suffixIcon="arrow-down-fill" customStyle="background-color: #F5F5F5;"
							suffixIconStyle="color: #333"></u--input>
					</view>
					<view class="">
						<view class="row size28 font700 col3 align minbottom20 mintop30">
							<image src="@/static/index/22.png" mode=""
								style="width: 34rpx;height: 36rpx;margin-right: 10rpx;">
							</image>
							求租/求购标题
						</view>
						<u--input placeholder="请填写标题" v-model="title"
							customStyle="background-color: #F5F5F5;"></u--input>
					</view>
					<view class="row size28 font700 col3 align minbottom20 mintop30">
						<image src="@/static/index/add.png" mode=""
							style="width: 32rpx;height: 36rpx;margin-right: 10rpx;">
						</image>
						{{ category == '农产品' || category_id == '4781981571718582272' ? '求购/求租发货位置' : '求租/求购位置' }}
					</view>
					<view @click="addshow = true">
						<u--input placeholder="请填写具体位置" disabled="true" v-model="address"
							customStyle="background-color: #F5F5F5;"></u--input>
					</view>
					<view class="" v-if="category == '农产品' || category_id == '4781981571718582272'">
						<view class="row size28 font700 col3 align minbottom20 mintop30">
							<image src="@/static/index/105.png" mode=""
								style="width: 36rpx;height: 34rpx;margin-right: 10rpx;">
							</image>
							求购/求租数量
						</view>
						<u--input placeholder="请填写数量" v-model="area"
							customStyle="background-color: #F5F5F5;"></u--input>
					</view>
					<view class="" v-if="category != '农产品' || category_id != '4781981571718582272'">
						<view class="row size28 font700 col3 align minbottom20 mintop30">
							<image src="@/static/index/land.png" mode=""
								style="width: 36rpx;height: 36rpx;margin-right: 10rpx;">
							</image>
							求购/求租面积
						</view>
						<u--input placeholder="请填写面积" v-model="area"
							customStyle="background-color: #F5F5F5;"></u--input>
					</view>
					<view class="row size28 font700 col3 align minbottom20 mintop30">
						<image src="@/static/index/Vector.png" mode=""
							style="width: 32rpx;height: 36rpx;margin-right: 10rpx;">
						</image>
						意向价格
					</view>
					<!-- #ifndef APP-NVUE -->
					<u-input placeholder="请填写您的意向价格" v-model="price" customStyle="background-color: #F5F5F5;">
					<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						<u--input placeholder="请填写您的意向价格" v-model="price" customStyle="background-color: #F5F5F5;">
						<!-- #endif -->
							<u--text text="元" slot="suffix" margin="0 3px 0 0" type="tips"></u--text>
					<!-- #ifndef APP-NVUE -->
					</u-input>
					<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					</u--input>
					<!-- #endif -->
				</view>
				<view class="" style="border-top: 2rpx solid #FAB029;">
					<view class="min30 column">
						<view class="row mintop20">
							<view class="row size28 font700 col3 align minright20">
								联系人
							</view>
							<u--input placeholder="请填写联系人姓名" v-model="contacts"
								customStyle="background-color: #F5F5F5;"></u--input>
						</view>
						<view class="row mintop30 minbottom20">
							<view class="row size28 font700 col3 align minright20">
								手机号
							</view>
							<u--input placeholder="请填写联系人手机号" maxlength="11" v-model="mobile"
								customStyle="background-color: #F5F5F5;"></u--input>
						</view>
					</view>
				</view>
			</view>
			<!-- 发布内容 -->
			<!-- 协议 -->
			<view class="disflex" style="justify-content: center;">
				<u-checkbox-group @change="checkboxChange" shape="circle">
					<u-checkbox activeColor="#C2AE8C" name="1" label="我已阅读并同意" labelSize="13"
						label-color="#000"></u-checkbox>
					<view class="size26 font500" style="color: #A94315;"
						@click="this.$jump.nav('/releasepackage/protocol?type=' + 0)">
						《发布协议》
					</view>
				</u-checkbox-group>
			</view>
			<!-- 协议 -->
			<!-- 发布按钮 -->
			<view class="minauto mintop40" style="width: 400rpx;">
				<u-button shape="circle" color="linear-gradient( 136deg, #FFBC43 0%, #FFDA97 100%)"
					customStyle="color: #885400;font-weight: 600;" text="发布需求" @click="onRelease"></u-button>
			</view>

			<!-- 发布按钮 -->
			<!-- 类目选择器 -->
			<u-picker :show="categoryshow" keyName="title" :columns="columns" @confirm="categoryConfirm"
				@cancel="categoryCancel"></u-picker>
			<!-- 类目选择器 -->
		</view>
		<view class="" v-else>
			<view class="font600 size30 minauto center" style="color: #885400;margin-bottom: 120rpx;"
				:style="{ marginTop: pageHeight - 120 + 'px' }">
				已发布，等待审核
			</view>
			<view class="minauto mintop40 minbottom40" style="width: 400rpx;">
				<u-button shape="circle" color="linear-gradient( 136deg, #FFBC43 0%, #FFDA97 100%)"
					customStyle="color: #885400;font-weight: 600;" text="返回首页"
					@click="$jump.switch('/pages/index/index')"></u-button>
			</view>
		</view>
		<!-- 省县区选择器 -->
		<u-picker :show="addshow" ref="uPicker" keyName="name" :columns="addlist" @confirm="addConfirm"
			@cancel="addshow = false" @change="changeHandler"></u-picker>
		<!-- 省县区选择器 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageHeight: '',
				category: '',
				title: '',
				address_id: '',
				category_id: '',
				user_id: '',
				address: '',
				quantity: '',
				area: '',
				price: '',
				contacts: '',
				mobile: '',
				show: false,
				addshow: false,
				categoryshow: false,
				checkboxValue: '',
				addlist: [],
				columnsList: [],
				columns: [],

			}
		},
		onLoad() {
			this.show = false
			this.pageHeight = uni.getSystemInfoSync().windowHeight / 2
		},
		onShow() {
			//当前页面展示的时候他就执行该生命周期
			this.user_id = uni.getStorageSync('user_id');
			if (this.user_id) {
				//如果存在token
				this.getCategory()
				this.getAreaList()
				//按正常逻辑来讲 登录成功 我们是不是需要向服务器获取用户的信息？
				//那么我们一起来获取用户信息
			} else {
				this.$com.toast('您还未登录，正在前往登录')
				setTimeout(() => {
					this.$jump.nav('/mypackage/sign')
				}, 1000)
			}
		},
		methods: {
			async getCategory() {
				let {
					code,
					msg,
					data
				} = await this.$com.fetchGet("AppletAsking/CategoryList")
				if (code == 1) {
					this.columns = [data]
				} else {
					console.log(msg);
				}
			},
			async getAreaList() {
				let departmentColumns = [] //部门岗位数据
				let originalColumns = [] //默认的子数据
				let thirdData = []
				let {
					code,
					msg,
					data
				} = await this.$com.fetchGet("AppletAsking/AreaList")
				if (code == 1) {
					this.columnsList = data //选择数据
					//初始数据
					departmentColumns = data
					if (data[0].children == null) {
						originalColumns = []
					} else {
						originalColumns = data[0].children //第一层下面的第二层数据
					}
					if (originalColumns[0].children == null) {
						thirdData = []
					} else {
						thirdData = originalColumns[0].children //第二层下面的第三层数据
					}
					this.addlist = [departmentColumns, originalColumns, thirdData]
				} else {
					console.log(msg);
				}
			},
			async getAddBuy() {
				let {
					code,
					msg,
					data
				} = await this.$com.fetch("AppletAsking/UserAsking", {
					applet_category_ids: this.category_id,
					title: this.title,
					user_ids: this.user_id,
					address: this.address_id,
					area: this.area,
					price: this.price,
					contact: this.contacts,
					phone: this.mobile,
					type: this.category == '农产品' || this.category_id == '4781981571718582272' ? 1 : 0
				})
				if (code == 1) {
					this.$com.toast(msg)
					setTimeout(() => {
						this.$jump.switch('/pages/buy/buy')
					}, 1000)
				} else {
					console.log(msg);
					this.$com.toast(msg)
				}
			},
			checkboxChange(n) {
				this.checkboxValue = n[0]
			},
			onRelease() {
				let that = this;
				var strTemp = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
				if (!that.category) return this.$com.toast('请选择类别');
				if (!that.title) return this.$com.toast('请输入商品名');
				if (!that.address) return this.$com.toast('请输入位置');
				if (!that.area) return this.$com.toast(category == '农产品' || category_id == '4781981571718582272' ?
					'请填写数量' : '请填写面积');
				if (!that.price) return this.$com.toast('请填写您的意向价格');
				if (!that.contacts) return this.$com.toast('请填写联系人');
				if (!that.mobile) return this.$com.toast('请输入手机号');
				if (!strTemp.test(that.mobile)) return this.$com.toast('手机号输入不正确');
				if (!that.checkboxValue) return this.$com.toast('请先同意协议');
				that.getAddBuy()
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values,
					index,
					indexs,
					picker = this.$refs.uPicker
				} = e
				if (columnIndex === 0) {
					let items = this.columnsList[index].children.map((e) => {
						return e
					})
					picker.setColumnValues(1, items)
					items = this.columnsList[index].children[0].children.map((e) => {
						return e
					})
					picker.setColumnValues(2, items)
				}
				if (columnIndex === 1) {
					let items = this.columnsList[indexs[0]].children[index].children.map(
						(e) => {
							return e
						})
					picker.setColumnValues(2, items)
				}
			},
			addConfirm(e) {
				var addarr = []
				e.value.map((e) => {
					addarr.push(e.id)
				})
				this.address_id = addarr.toString()
				this.address = e.value[0].name + e.value[1].name + e.value[2].name
				console.log(this.address_id)
				this.addshow = false
			},
			categoryCancel() {
				this.category = ''
				this.category_id = ''
				this.title = ''
				this.address = ''
				this.quantity = ''
				this.area = ''
				this.price = ''
				this.categoryshow = false
			},
			categoryConfirm(e) {
				this.category = e.value[0].title
				this.category_id = e.value[0].id
				this.title = ''
				this.address = ''
				this.area = ''
				this.price = ''
				this.categoryshow = false
			},
		}
	}
</script>

<style scoped lang="less">
	.box {
		background: linear-gradient(136deg, #FFBC43 0%, #FFDA97 100%);
		border-radius: 20rpx 0rpx 20rpx 0rpx;
		padding: 10rpx 30rpx;
		width: 140rpx;
		color: #885400;

	}
</style>